<template>
	<div class="system-user-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
			<el-form ref="userDialogFormRef" :model="state.ruleForm" size="default" label-width="90px" :rules="state.rules">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-show="state.type !== 'pwd'">
						<el-form-item label="用户名称" prop="name">
							<el-input v-model="state.ruleForm.name" placeholder="请输入账户名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-show="state.type !== 'edit'">
						<el-form-item label="用户密码" prop="password">
							<el-input v-model="state.ruleForm.password" placeholder="请输入" type="password" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-show="state.type !== 'edit'">
						<el-form-item label="确认密码" prop="confirmPassword">
							<el-input v-model="state.ruleForm.confirmPassword" placeholder="请输入" type="password" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-show="state.type !== 'pwd'">
						<el-form-item label="用户状态">
							<el-switch
								v-model="state.ruleForm.status"
								inline-prompt
								active-text="启"
								inactive-text="禁"
								active-value="normal"
								inactive-value="disable"
							></el-switch>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemUserDialog">
import { reactive, ref, nextTick } from 'vue';
import { adminDetail, addAdmin, updateAdmin } from '../../../api/admin';
import { ElMessage } from 'element-plus';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义父组件向子组件传值
const props = defineProps({
	id: { type: Number, required: false, default: 0 }
});

// 定义变量内容
const userDialogFormRef = ref();
const confirmPwdValid = (rule: any, value: any, callback: any) => {
	if (value === '') {
		callback(new Error('请输入确认密码'));
	} else if (value !== state.ruleForm.password) {
		callback(new Error('两次输入密码不一致'));
	} else {
		callback();
	}
};
const state = reactive({
  type: '',
	id: 0,
	ruleForm: {
		name: '',
		password: '',
		confirmPassword: '',
		status: 'normal',
	},
	rules: {
		name: [
			{
				required: true,
				message: '请输入用户名称',
				trigger: 'blur',
			},
		],
		password: <EmptyArrayType>[],
		confirmPassword: <EmptyArrayType>[],
	},
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});

// 打开弹窗
const openDialog = (type: string, id: number) => {
  state.type = type;
	if (type === 'edit') {
		state.id = id;
		state.dialog.title = '修改用户';
		state.dialog.submitTxt = '修 改';
    state.rules.password = [];
    state.rules.confirmPassword = [];
	} else if(type === 'add') {
		state.ruleForm = {
			name: '',
			password: '',
			confirmPassword: '',
			status: 'normal',
		};
		state.id = 0;
		state.dialog.title = '新增用户';
		state.dialog.submitTxt = '新 增';
    state.rules.password = [
      {
				required: true,
				message: '请输入密码',
				trigger: 'blur',
			},
    ];
    state.rules.confirmPassword = [
      { required: true, message: '请输入确认密码', trigger: 'blur' },
			{ validator: confirmPwdValid, trigger: 'blur' },
    ];
	} else if(type === 'pwd') {
    state.id = id;
		state.dialog.title = '修改密码';
		state.dialog.submitTxt = '修 改';
    state.rules.password = [
      {
				required: true,
				message: '请输入密码',
				trigger: 'blur',
			},
    ];
    state.rules.confirmPassword = [
      { required: true, message: '请输入确认密码', trigger: 'blur' },
			{ validator: confirmPwdValid, trigger: 'blur' },
    ];
  }
	state.dialog.isShowDialog = true;
	// 清空表单，此项需加表单验证才能使用
	nextTick(() => {
		userDialogFormRef.value.resetFields();
		userDialogFormRef.value.clearValidate();
	});
	if (state.id) {
		getUserDetail();
	}
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 提交
const onSubmit = () => {
	userDialogFormRef.value.validate((valid: boolean, fields: EmptyArrayType) => {
		if (valid) {
			if (state.id) {
				updateAdmin(state.ruleForm).then((res: any) => {
					if (res.status === 'success') {
						closeDialog();
						emit('refresh');
					} else {
						ElMessage.error(res.msg);
					}
				});
			} else {
				addAdmin(state.ruleForm).then((res: any) => {
					if (res.status === 'success') {
						closeDialog();
						emit('refresh');
					} else {
						ElMessage.error(res.msg);
					}
				});
			}
		} else {
			return false;
		}
	});
	// if (state.dialog.type === 'add') { }
};

// 获取壁纸详情数据
const getUserDetail = () => {
	adminDetail(state.id).then((res: any) => {
		if (res.status === 'success') {
			state.ruleForm = res.data;
		} else {
			ElMessage.error(res.msg);
		}
	});
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>
